<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=UTF-8");
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="<%=path %>/manager/css/summary.css">
	<script src="<%=path %>/admin/js/jquery-2.2.3.min.js"></script>
</head>
<body>
	<div class="sys-summary">
		<div class="summary-title">汇总</div>
		<div class="summary-content">
			<div class="project left">
				<div class="sum-name">项目</div>
				<div class="pro">
					<span>总数</span>
					<span>已结束</span>
					<span>进行中</span>
				</div>
				<div class="sum-line"></div>
				<div id="three" class="people-number">
					<span>100</span>
					<span>10</span>
					<span>30</span>
				</div>
			</div>
			<div class="task left">
				<div class="sum-name">任务</div>
				<div class="pro">
					<span>总数</span>
					<span>进行中</span>
					<span>已完成</span>
					<span>逾期</span>
				</div>
				<div class="sum-line"></div>
				<div id="four" class="people-number">
					<span>100</span>
					<span>10</span>
					<span>10</span>
					<span>30</span>
				</div>
			</div>
			<div class="member left">
				<div class="sum-name">成员</div>
				<div class="pro">
					<span>总人数</span>
					<span>活跃人数</span>
				</div>
				<div class="sum-line"></div>
				<div id="two" class="people-number">
					<span>100</span>
					<span>10</span>
				</div>
			</div>
		</div>
		<div class="statistics" id="statistics">
			<div class="statis-title">
				<div class="title-line" id="titleLine"></div>
				<ul id="statisTitle">
					<li id="project" class="active1">项目统计</li>
					<li id="member">成员统计</li>
				</ul>
			</div>
			<div class="statis-content" id="statisContent">
				<div class="pro-statis foo">
					<div class="pro-title">
						<span>项目</span>
						<span>成员</span>
						<span>已完成任务数/总任务数</span>
						<span>进行中任务数</span>
					</div>
					<div class="pro-line"></div>
					<div id="list-content">
					<div class="pro-details">
						<ul id="proDetails">
							<li>
								<span>火星影视平台</span>
								<span>10</span>
								<span>200/300</span>
								<div class="progress-wrap">
									<div class="progress">
										<div style="width:70%"></div>
										<div style="width:20%"></div>
										<div style="width:10%""></div>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="pro-details">
						<ul id="proDetails">
							<li>
								<span>火星影视平台</span>
								<span>10</span>
								<span>200/300</span>
								<div class="progress-wrap">
									<div class="progress">
										<div style="width:70%"></div>
										<div style="width:20%"></div>
										<div style="width:10%""></div>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="pro-details">
						<ul id="proDetails">
							<li>
								<span>火星影视平台</span>
								<span>10</span>
								<span>200/300</span>
								<div class="progress-wrap">
									<div class="progress">
										<div style="width:70%"></div>
										<div style="width:20%"></div>
										<div style="width:10%""></div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				</div>
				
			</div>
			<!-- <div class="pager">
				<div>上一页</div>
				<div class="page-number">
					<ul id="pagerWrap">
						<li class="number">1</li>
						<li>2</li>
						<li>3</li>
					</ul>
				</div>
				<div>下一页</div>
				<div>共10条</div>
			</div> -->
		</div>
	</div>
	<script src="<%=path %>/manager/js/summary.js"></script>
	<script>
	
		function  createEmpThead(){
			$(".pro-title").html("");
			var thead="";
			thead+="<span>成员</span>";
			thead+="<span>总任务数</span>";
			thead+="<span>已完成任务</span>";
			thead+="<span>逾期任务</span>";
			thead+="<span>进行中任务数</span>";
			$(".pro-title").html(thead);
		}
		
		function createProjectThead(){
			$(".pro-title").html("");
			var thead="";
			thead+="<span>项目</span>";
			thead+="<span>成员</span>";
			thead+="<span>已完成任务数/总任务数</span>";
			thead+="<span>进行中任务数</span>";
			$(".pro-title").html(thead);
		}
	
		$(function(){
			$.ajax({
				url:"${pageContext.request.contextPath}/gathers/list",
				type:"get",
				data:"",
				datatype : "json",
				success:function(data){
					var obj = eval('(' + data + ')');
					$("#three").html("");
					$("#four").html("");
					$("#two").html("");
					var projHtmls = "";
					var taskHtmls="";
					var empHtmls="";
					projHtmls+=''
					+'<span>'+obj.projectSum+'</span>'
					+'<span>'+obj.finalProSum+'</span>'
					+'<span>'+obj.projectingSum+'</span>';
					taskHtmls+=''
						+'<span>'+obj.taskSum+'</span>'
						+'<span>'+obj.taskingSum+'</span>'
						+'<span>'+obj.completeTaskSum+'</span>'
						+'<span>'+obj.overTimeTaskSum+'</span>';
					empHtmls+=''
						+'<span>'+obj.employeeSum+'</span>'
						+'<span>'+obj.activeSum+'</span>';
					$("#three").html(projHtmls);
					$("#four").html(taskHtmls);
					$("#two").html(empHtmls);
					}
			});
			creatProjThead();
		})
		
		
		function creatProjThead(){
		   $.ajax({
					url : "${pageContext.request.contextPath}/gathers/projectList",
					type : "get",
					data : "",
					datatype : "json",
					success : function(data) {
						createProjectThead();
						createProjectBody(data);
					}
				});
			}
			
			function createProjectBody(obj){
				$("#list-content").html("");
				var dataTBody="";
			    var tasking="";
				$.each($.parseJSON(obj),function(index,element){
					tasking =element.taskSum-element.taskedCount;

					dataTBody+='<div class="pro-details">';
					dataTBody+='<ul id="proDetails">';
					dataTBody+="<li>";
					dataTBody+="<span>"+element.projName+"</span>";
					dataTBody+="<span>"+element.empCount+"</span>";
					dataTBody+="<span>"+element.taskedCount+'/'+element.taskSum+"</span>";
					dataTBody+='<div class="progress-wrap">';
					dataTBody+='<div class="progress">';
					dataTBody+='<div style="width:70%"></div>';
					dataTBody+='<div style="width:20%"></div>';
					dataTBody+='<div style="width:10%"></div>';
					dataTBody+="</div>";
					dataTBody+="</div>";
					dataTBody+="</li>";
					dataTBody+="</ul>";
					dataTBody+="</div>";
					
				});
				$("#list-content").html(dataTBody);
			}
			function createEmpBody(obj){
				$("#list-content").html("");
				var dataTBody="";
			    var tasking="";
				$.each($.parseJSON(obj),function(index,element){
					tasking =element.taskSum-element.taskedCount;

					dataTBody+='<div class="pro-details">';
					dataTBody+='<ul id="proDetails">';
					dataTBody+="<li>";
					dataTBody+="<span>"+element.empName+"</span>";
					dataTBody+="<span>"+element.empCount+"</span>";
					dataTBody+="<span>"+element.taskedSum+"</span>";
					dataTBody+="<span>"+element.taskedCount+'/'+element.taskSum+"</span>";
					dataTBody+='<div class="progress-wrap">';
					dataTBody+='<div class="progress">';
					dataTBody+='<div style="width:70%"></div>';
					dataTBody+='<div style="width:20%"></div>';
					dataTBody+='<div style="width:10%"></div>';
					dataTBody+="</div>";
					dataTBody+="</div>";
					dataTBody+="</li>";
					dataTBody+="</ul>";
					dataTBody+="</div>";
					
				});
				$("#list-content").html(dataTBody);
				
			}
			var isClickPro=true;
			$(document).on('click', '#project', function() {
				//this.style.display = 'none';
				$("#member").removeClass("active1");
				$("#project").addClass("active1");
				var titleLine = document.getElementById('titleLine');
				if(!isClickPro){
					titleLine.style.left = "20px";
					isClickPro=true;
				}
				$.ajax({
					url : "${pageContext.request.contextPath}/gathers/projectList",
					data : {
					},
					type : "get",
					datatype : "json",
					success : function(data) {
						createProjectThead();
						createProjectBody(data);
						}			
				});
			});
			
			$(document).on('click', '#member', function() {
				$("#member").addClass("active1");
				$("#project").removeClass("active1");
				var titleLine = document.getElementById('titleLine');
				if(isClickPro){
					titleLine.style.left = "135px";
					isClickPro=false;
				}
				$.ajax({
					url : "${pageContext.request.contextPath}/gathers/empList",
					data : {
					},
					type : "get",
					datatype : "json",
					success : function(data) {
						createEmpThead();
						createEmpBody(data);
						}			
				});
			});	
	</script>
</body>
</html>